<template>
  <div class="normal-search">
    <div class="normal-search-row clearfloat">
        <input type="text"
               placeholder="请输入舆情编号，警情编号搜索"
               class="search-input f-l">
        <div class="f-r">
          <span class="f-l search-color send-time">采集时间：</span>
          <!-- startTime -->
          <div class="input-group date time-item" id="startTimeId">
            <input type="hidden" ref="startTimeRef" name="birthday">
            <input type="text" ref="startTimeRef" readonly="readonly" id="datetimepicker" class="form-control input-time-show" required="required" data-date-format="dd-mm-yyyy">
            <span class="input-group-addon span-time-icon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
          </div>
          <!-- startTime end-->
          <span class="f-l search-color send-time">&nbsp;--&nbsp;</span>
          <!-- endTime -->
          <div class="input-group date time-item queryMSMPage-border" id="endTimeId">
            <input type="hidden" ref="endTimeRef" name="birthday">
            <input type="text" ref="endTimeRef" readonly="readonly" id="endDatetimepicker" class="form-control input-time-show" required="required" data-date-format="dd-mm-yyyy">
            <span class="input-group-addon span-time-icon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
          </div>
          <!-- endTime end-->
        </div>
    </div>
    <div class="normal-search-row flex-four">
      <div class="search-four" v-for="item in selectSourceList" :key="item.type">
        <label  class="search-color search-four-title f-l" v-text="item.title"></label>
        <selectSource :selectObj="item"
        @selectFn="selectFn">
        </selectSource>
      </div>
    </div>
    <div class="normal-search-row box-center">
      <button type="button" class="btn btn-default btn-self-search">查询</button>
      <button type="button" class="btn btn-default btn-self-search">恢复默认</button>
      <button type="button" class="btn btn-default btn-self-Upsearch">高级搜索</button>
    </div>
  </div>
</template>

<script>
import selectSource from '@/components/select/selectSource'
export default {
  name: 'normalSearch',
  data () {
    return {
      startTime: '', // 起始时间
      endTime: '', // 结束时间
      selectSourceList: [
        {
          type: 2,
          title: '舆情来源：'
        }, {
          type: 4,
          title: '舆情分类：'
        }, {
          type: 3,
          title: '舆情性质：'
        }, {
          type: 6,
          title: '舆情级别：'
        }
      ],
      selectedObj: {
        selected2: [], // 舆情来源
        selected4: [], // 舆情分类
        selected3: [], // 舆情性质
        selected6: [] // 舆情级别
      }
    }
  },
  components: {
    selectSource
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      // 初始化时间
      this.startTime = new Date(new Date().getTime() + 8 * 60 * 60 * 1000).toISOString().split('T')[0] + ' 00:00:00'
      this.endTime = new Date(new Date().getTime() + 8 * 60 * 60 * 1000).toISOString().replace('T', ' ').split('.')[0]
      // 初始化时间控件
      this.initTimeControl()
    },
    // 时间控件初始化
    initTimeControl () {
      let self = this
      /* eslint-disable */
      $(function () {
        $('#startTimeId').datetimepicker({
          language: 'zh-CN',
          format: 'yyyy-mm-dd hh:ii:ss',
          endDate: new Date(),
          // minView: "month",
          autoclose: true
        }).on('changeDate', function (ev) {
          let value = self.$refs.startTimeRef.value
          if (value <= self.endTime) {
            self.startTime = value
          } else {
            self.s_alert('开始时间不能大于结束时间')
            self.$nextTick(function () {
              let time = self.startTime
              self.$refs.startTimeRef.value = time.replace('T', ' ').split('+')[0]
            })
          }
          console.log(self.startTime)
        })
        $('#endTimeId').datetimepicker({
          language: 'zh-CN',
          format: 'yyyy-mm-dd hh:ii:ss',
          endDate: new Date(),
          // minView: "month",
          autoclose: true
        }).on('changeDate', function (ev) {
          let value = self.$refs.endTimeRef.value
          if (self.startTime <= value) {
            self.endTime = value
          } else {
            self.s_alert('结束时间不能小于开始时间')
            self.$nextTick(function () {
              let time = self.endTime
              self.$refs.endTimeRef.value = time.replace('T', ' ').split('+')[0]
            })
          }
          // console.log(ev.date.valueOf());
        })
        self.$refs.startTimeRef.value = self.startTime
        self.$refs.endTimeRef.value = self.endTime
      })
    },
    // 多选下拉事件
    selectFn (data) {
      this.selectedObj['selected' + data.type] = data.val
      console.log(this.selectedObj)
    }
  }
}
</script>

<style scoped>

</style>
